<template>
  <div class="resume" v-loading="container_loading" element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/resume' }">个人简历</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row class="resume-container" type="flex" justify="space-between">
      <el-col class="resume-info">
        <el-card shadow="always" style="border-radius: 10px" v-loading="resume_info_loading">
          <el-row style="font-size: 20px;font-weight: 600">个人信息</el-row>
          <el-form style="margin-top: 20px" :model="resume_form" ref="resume_form" :rules="resume_info_rules"
                   label-position="top" :inline="true" v-loading="loading">
            <el-row class="resume-form-row-first" type="flex">
              <el-col>
                <el-form-item label="姓名" prop="name">
                  <el-input class="resume-item-height" v-model="resume_form.name" placeholder="请输入姓名" clearable/>
                </el-form-item>
                <el-form-item label="期望职位" prop="expect_career">
                  <el-input class="resume-item-height" v-model="resume_form.expect_career" placeholder="请输入期望职位"
                            clearable/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="照片" prop="resume_avatar">
                  <el-row type="flex" justify="center">
                    <el-col>
                      <el-upload
                          :disabled="photoUploadDisabled"
                          class="avatar-uploader"
                          ref="upload"
                          :action="submitPhotoUrl"
                          :headers="headers"
                          :show-file-list="false"
                          :auto-upload="false"
                          :on-error="uploadFileError"
                          :on-success="uploadFileSuccess"
                          :on-change="handleAvatarChangeIcon">
                        <img v-if="resume_form.resume_avatar" :src="resume_form.resume_avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-col>
                    <el-col :span="4" style="display: flex;align-items: center;justify-content: center" >
                      <el-button round v-if="photoUploadDisabled" @click="modifyResumePhotoDialogVisible = true">更改头像</el-button>
                      <el-dialog
                          title="编辑照片"
                          :visible.sync="modifyResumePhotoDialogVisible"
                          width="450px"
                          :before-close="handleModifyUploadResumeDialogClose"
                          center>
                        <el-card shadow="hover">
                          <el-upload
                              ref="modify_photo"
                              drag
                              multiple
                              :action="modifyPhotoUrl"
                              :headers="headers"
                              :limit="1"
                              :before-upload="beforeModifyResumePhotoUpload"
                              :on-success="modifyResumePhotoUploadSuccess"
                              :on-error="modifyResumePhotoUploadError">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传 .jpg文件, 并且文件大小不超过2MB</div>
                          </el-upload>
                        </el-card>
                      </el-dialog>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="resume_form.sex" clearable placeholder="请选择性别"
                             class="search-select resume-item-height">
                    <el-option label="男" :value="0"></el-option>
                    <el-option label="女" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="参加工作时间" prop="into_work_time">
                  <el-date-picker
                      class="resume-item-height"
                      v-model="resume_form.into_work_time"
                      type="date"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                      class="resume-item-height"
                      v-model="resume_form.birthday"
                      type="date"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="邮箱" prop="email">
                  <el-input class="resume-item-height" v-model="resume_form.email" placeholder="请输入邮箱" clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="电话" prop="phone">
                  <el-input class="resume-item-height" v-model="resume_form.phone" placeholder="请输入电话" clearable/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="微信号" prop="wechat_id">
                  <el-input class="resume-item-height" v-model="resume_form.wechat_id" placeholder="请输入微信号"
                            clearable/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="期望城市" prop="expect_city">
                  <el-cascader
                      class="resume-item-height"
                      placeholder="请选择公司城市"
                      clearable
                      :options="city"
                      :show-all-levels="false"
                      v-model="resume_form.expect_city"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="期望薪资">
                  <el-row type="flex" :gutter="10" style="width: 360px">
                    <el-col>
                      <el-select v-model="resume_form.expect_salary_down" clearable placeholder="请选择薪资下限">
                        <el-option
                            v-for="o in 255"
                            :key="o"
                            :label="o + 'k'"
                            :value="o + 'k'">
                        </el-option>
                      </el-select>
                    </el-col>
                    -
                    <el-col>
                      <el-select v-model="resume_form.expect_salary_up" clearable placeholder="请选择薪资下限">
                        <el-option
                            v-for="o in 255"
                            :key="o"
                            :label="o + 'k'"
                            :value="o + 'k'">
                        </el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="籍贯" prop="origin_city">
                  <el-cascader
                      class="resume-item-height"
                      placeholder="请选择籍贯"
                      clearable
                      :options="city"
                      :show-all-levels="false"
                      v-model="resume_form.origin_city"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="政治面貌" prop="politics_status">
                  <el-select v-model="resume_form.politics_status" clearable placeholder="请选择性别"
                             class="search-select resume-item-height">
                    <el-option label="共产党员" :value="0"></el-option>
                    <el-option label="非党员" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-button class="resume-base—info-btn" :disabled="loading" @click="handleClearResumeInfo">重置所有
            </el-button>
            <el-button v-if="resume_form.id === ''" class="resume-base—info-btn" :disabled="loading"
                       @click="handleSubmitResumeInfo">
              保存
            </el-button>
            <el-button v-else class="resume-base—info-btn" :disabled="loading" @click="handleSubmitUpdateResumeInfo">
              修改
            </el-button>
          </el-row>

          <!-- 教育经历 -->
          <el-row style="font-size: 20px;font-weight: 600;margin-top: 20px" type="flex" justify="space-between">
            <el-col>教育经历</el-col>
            <el-col :span="1">
              <el-tooltip class="item" effect="dark" content="添加教育经历" placement="top">
                <el-button icon="el-icon-plus" size="mini" @click="eduExperienceDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-dialog title="教育经历" :visible.sync="eduExperienceDialogFormVisible"
                         append-to-body
                         :before-close="handleEduExperienceDialogClose"
                         width="600px">
                <el-form ref="edu_form" :model="edu_form" label-width="80px" size="small" :rules="edu_form_rules"
                         label-position="right">
                  <el-row type="flex" justify="space-around">
                    <el-col :span="12">
                      <el-form-item label="学校名称" prop="school_name">
                        <el-input v-model="edu_form.school_name" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="学历" prop="education">
                        <el-select v-model="edu_form.education" placeholder="请选择学历" clearable>
                          <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label"
                                     :value="item.value" style="width: 220px"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="专业" prop="specialty">
                        <el-input v-model="edu_form.specialty" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="排序" prop="orderBy">
                        <el-select v-model="edu_form.orderBy" placeholder="请选择展示顺序" clearable>
                          <el-option v-for="o in 4" :key="o-1" :label="o-1"
                                     :value="o-1"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="入学时间" prop="start_time">
                        <el-date-picker
                            v-model="edu_form.start_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="退学时间" prop="end_time">
                        <el-date-picker
                            v-model="edu_form.end_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handleEduExperienceDialogClose">取 消</el-button>
                  <el-button @click="handleSaveUserEduExperience" type="primary">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px">
            <el-card shadow="never" style="margin-top: 10px" v-if="resume_form.id.length !== 0"
                     v-for="edu in eduExperienceArray">
              <el-row class="title" type="flex">
                <el-col>{{ edu.school_name }}</el-col>
                <el-col :span="2">
                  <el-row type="flex">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <el-button size="mini" icon="el-icon-edit" @click="updateEduExperience(edu)" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <el-button size="mini" icon="el-icon-close" @click="deleteEduExperience(edu)" circle></el-button>
                    </el-tooltip>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="info">
                {{ edu.education }}
                <el-divider direction="vertical"></el-divider>
                {{ edu.specialty }}
                <el-divider direction="vertical"></el-divider>
                {{ new Date(edu.start_time).getFullYear() }} - {{ new Date(edu.end_time).getFullYear() }}
              </el-row>
            </el-card>
            <el-empty v-if="resume_form.id.length !== 0 && eduExperienceArray.length === 0"
                      description="教育经历为空"></el-empty>
          </el-row>

          <!-- 实习经历 -->
          <el-row style="font-size: 20px;font-weight: 600;margin-top: 20px" type="flex" justify="space-between">
            <el-col>实习经历</el-col>
            <el-col :span="1">
              <el-tooltip class="item" effect="dark" content="添加实习经历" placement="top">
                <el-button icon="el-icon-plus" size="mini" @click="praExperienceDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-dialog title="实习经历" :visible.sync="praExperienceDialogFormVisible"
                         append-to-body
                         :before-close="handlePraExperienceDialogClose"
                         width="600px">
                <el-form ref="pra_form" :model="pra_form" label-width="80px" size="small" :rules="pra_form_rules"
                         label-position="right">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="公司名称" prop="company_name">
                        <el-input v-model="pra_form.company_name" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="职位名称" prop="career_name">
                        <el-input v-model="pra_form.career_name" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="入职时间" prop="start_time">
                        <el-date-picker
                            v-model="pra_form.start_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="辞职时间" prop="end_time">
                        <el-date-picker
                            v-model="pra_form.end_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handlePraExperienceDialogClose">取 消</el-button>
                  <el-button @click="handleSaveUserPraExperience" type="primary">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-card shadow="never" style="margin-top: 10px" v-if="resume_form.id.length !== 0"
                     v-for="pra in praExperienceArray">
              <el-row class="title" type="flex">
                <el-col>{{ pra.company_name }}</el-col>
                <el-col :span="2">
                  <el-row type="flex">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <el-button size="mini" icon="el-icon-edit" @click="updatePraExperience(pra)" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <el-button size="mini" icon="el-icon-close" @click="deletePraExperience(pra)" circle></el-button>
                    </el-tooltip>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="info">
                {{ pra.career_name }}
                <el-divider direction="vertical"></el-divider>
                {{ msToDate(pra.start_time).withoutTime }} - {{ msToDate(pra.end_time).withoutTime }}
              </el-row>
            </el-card>
            <el-empty v-if="resume_form.id.length !== 0 && praExperienceArray.length === 0"
                      description="实习经历为空"></el-empty>
          </el-row>

          <!-- 项目经历 -->
          <el-row style="font-size: 20px;font-weight: 600;margin-top: 20px" type="flex" justify="space-between">
            <el-col>项目经历</el-col>
            <el-col :span="1">
              <el-tooltip class="item" effect="dark" content="添加项目经历" placement="top">
                <el-button icon="el-icon-plus" size="mini" @click="proExperienceDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-dialog title="项目经历" :visible.sync="proExperienceDialogFormVisible"
                         append-to-body
                         :before-close="handleProExperienceDialogClose"
                         width="600px">
                <el-form ref="pro_form" :model="pro_form" label-width="80px" size="small" :rules="pro_form_rules"
                         label-position="right">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="项目名称" prop="project_name">
                        <el-input v-model="pro_form.project_name" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="项目角色" prop="project_character">
                        <el-input v-model="pro_form.project_character" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="开始时间" prop="start_time">
                        <el-date-picker
                            v-model="pro_form.start_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="结束时间" prop="end_time">
                        <el-date-picker
                            v-model="pro_form.end_time"
                            type="date"
                            style="width: 200px"
                            placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handleProExperienceDialogClose">取 消</el-button>
                  <el-button @click="handleSaveUserProExperience" type="primary">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-card shadow="never" style="margin-top: 10px" v-if="resume_form.id.length !== 0"
                     v-for="pro in proExperienceArray">
              <el-row class="title" type="flex">
                <el-col>{{ pro.project_name }}</el-col>
                <el-col :span="2">
                  <el-row type="flex">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <el-button size="mini" icon="el-icon-edit" @click="updateProExperience(pro)" circle></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <el-button size="mini" icon="el-icon-close" @click="deleteProExperience(pro)" circle></el-button>
                    </el-tooltip>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="info">
                {{ pro.project_character }}
                <el-divider direction="vertical"></el-divider>
                {{ msToDate(pro.start_time).withoutTime }} - {{ msToDate(pro.end_time).withoutTime }}
              </el-row>
            </el-card>
            <el-empty v-if="resume_form.id.length !== 0 && proExperienceArray.length === 0"
                      description="项目经历为空"></el-empty>
          </el-row>

          <!-- 荣誉奖项 -->
          <el-row type="flex" justify="space-between" style="font-size: 20px;font-weight: 600;margin-top: 20px">
            <el-col>荣誉奖项</el-col>
            <el-col :span="1">
              <el-tooltip v-if="honorAward_form.content === '' || honorAward_form.content === null" class="item" effect="dark" content="添加荣誉奖项" placement="top">
                <el-button icon="el-icon-plus" size="mini" @click="honorAwardDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-tooltip v-else class="item" effect="dark" content="修改荣誉奖项" placement="top">
                <el-button icon="el-icon-edit" size="mini" @click="honorAwardDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-dialog title="荣誉奖项" :visible.sync="honorAwardDialogFormVisible"
                         append-to-body
                         :before-close="handleHonorAwardDialogClose"
                         v-loading="honorAward_form_loading"
                         element-loading-text="正在提交中"
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)"
                         width="600px">
                <quill-editor
                    class="ql-editor"
                    v-model="honorAward_form.content"
                    ref="myQuillEditor"
                    :limitNumb="10"
                    :options="editorOption">
                </quill-editor>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handleHonorAwardDialogClose">取 消</el-button>
                  <el-button @click="handleSaveUserHonorAward" type="primary">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row>
            <el-card shadow="never" style="margin-top: 10px"
                     v-if="resume_form.id.length !== 0 &&
                      honorAward_form.content !== '' &&
                      honorAward_form.content !== null &&
                      honorAward_form.content !== undefined">
              <el-row v-html="honorAward_form.content"></el-row>
            </el-card>
          </el-row>

          <!-- 兴趣爱好及个人优势 -->
          <el-row type="flex" justify="space-between" style="font-size: 20px;font-weight: 600;margin-top: 20px">
            <el-col>兴趣爱好及个人优势</el-col>
            <el-col :span="1">
              <el-tooltip v-if="hobby_form.hobby === '' || hobby_form.hobby === null" class="item" effect="dark" content="添加" placement="top">
                <el-button icon="el-icon-plus" size="mini" @click="hobbyDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-tooltip v-else class="item" effect="dark" content="修改" placement="top">
                <el-button icon="el-icon-edit" size="mini" @click="hobbyDialogFormOpen"
                           circle></el-button>
              </el-tooltip>
              <el-dialog title="荣誉奖项" :visible.sync="hobbyDialogFormVisible"
                         append-to-body
                         :before-close="handleHobbyDialogClose"
                         v-loading="hobby_loading"
                         element-loading-text="正在提交中"
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)"
                         width="600px">
                <el-input
                    type="textarea"
                    placeholder="请输入兴趣爱好及个人优势"
                    v-model="hobby_form.hobby"
                    autosize
                    maxlength="600"
                    show-word-limit
                >
                </el-input>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handleHobbyDialogClose">取 消</el-button>
                  <el-button @click="handleSaveUserHobby" type="primary">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row>
            <el-card
                shadow="never"
                style="margin-top: 10px;white-space: pre-wrap;"
                v-if="resume_form.id.length !== 0 && hobby_form.hobby !== '' && hobby_form.hobby !== null"
            >
              {{ hobby_form.hobby }}
            </el-card>
          </el-row>
        </el-card>
      </el-col>
      <el-col class="resume-sum">
        <el-row>
          <el-card style="border-radius: 10px">
            <div slot="header"><span>平台简历</span></div>
            <el-row type="flex" justify="space-around" v-if="resumes.resumesInfo"
                    v-for="resume in resumes.resumesInfo" style="margin-top: 2px">
              <el-col>
                <el-button type="text" style="color: #28b8b8" :disabled="resumesDisabled"
                           icon="el-icon-star-on"
                           @click="checkResumeInfoById(resume.id)">{{ resume.resume_title }}
                </el-button>
              </el-col>
              <el-col :span="12" style="margin-top: 6px">
                <el-dropdown style="margin-left: 50px" @command="resumeChooses">
                <span class="el-dropdown-link">
                  &nbsp;&nbsp;<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'info.' + resume.id" icon="el-icon-info">查看简历</el-dropdown-item>
                    <el-dropdown-item :command="'remove.' + resume.id" icon="el-icon-delete">删除简历</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <el-empty v-else description="平台简历为空"></el-empty>
          </el-card>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-card style="border-radius: 10px">
            <div slot="header">
              <span>简历文件</span>
              <el-dropdown @command="uploadOnlineResume" style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  &nbsp;<i class="el-icon-plus el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="upload" icon="el-icon-upload">上传简历</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dialog
                  title="上传简历"
                  :visible.sync="uploadResumeDialogVisible"
                  width="450px"
                  :before-close="handleUploadResumeDialogClose"
                  center>
                <el-card shadow="hover">
                  <el-upload
                      class="upload-demo"
                      ref="upload_resume"
                      drag
                      multiple
                      :action="submitResumeFileUrl"
                      :headers="headers"
                      :limit="1"
                      :before-upload="beforeResumeFileUpload"
                      :on-success="resumeFileUploadSuccess"
                      :on-error="resumeFileUploadError">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传 .doc, .docx, .pdf等文件, 并且文件大小不超过5MB</div>
                  </el-upload>
                </el-card>
              </el-dialog>
            </div>
            <el-row v-if="resumes.onlineResumeFiles" v-for="item in resumes.onlineResumeFiles" type="flex"
                    class="online-resume-file">
              <el-col :span="8">
                <el-avatar v-if="checkSuff(item.file_name)" shape="square" style="background-color: white" fit="fill"
                           :size="50" :src="require('@/assets/images/pdf.png')"></el-avatar>
                <el-avatar v-else shape="square" style="background-color: white" fit="fill" :size="50"
                           :src="require('@/assets/images/word.png')"></el-avatar>
              </el-col>
              <el-col>
                <el-row style="font-size: 15px;">
                  <el-button type="text" :disabled="resumesFileDisabled"
                             style="line-height: 0px;"
                             @click="downloadFile(item.id)">{{ item.file_name }}
                  </el-button>
                </el-row>
                <el-row style="font-size: 14px; color: #6b6b6b; margin-top: 5px">{{ item.create_time }}</el-row>
              </el-col>
              <el-col :span="2">
                <el-dropdown @command="moreOnlineResume">
                <span class="el-dropdown-link">
                  &nbsp;<i class="el-icon-more-outline el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="'download.' + item.id " icon="el-icon-download">下载简历
                    </el-dropdown-item>
                    <el-dropdown-item :command="'remove.' + item.id" icon="el-icon-delete">删除简历</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <el-empty v-else description="简历文件为空"></el-empty>
          </el-card>
        </el-row>
        <el-divider>至多5份文件</el-divider>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from "@/store";
import {Message} from 'element-ui'
import {mapGetters} from "vuex";
import {msToDate} from "@/utils/format";
import {getToken} from "@/utils/auth";

export default {
  name: "Resume",
  data() {
    return {
      container_loading: false,
      resume_info_loading: false,
      loading: false,
      server: window.application.minio_host,
      resume_form: {
        id: "",
        name: "",
        expect_career: "",
        sex: "",
        into_work_time: "",
        birthday: "",
        email: "",
        phone: "",
        wechat_id: "",
        expect_city: [],
        expect_salary_down: "",
        expect_salary_up: "",
        origin_city: [],
        resume_avatar: "",
        politics_status: "",
        resume_title: "",
        user_id: 0
      },
      headers: {
        token: getToken()
      },
      avatarFile: '',
      resume_id: '',
      resume_info_rules: {
        name: [
          {required: true, message: '姓名不能为空', trigger: ['blur', 'change']},
        ],
        expect_career: [
          {required: true, message: '期望职位不能为空', trigger: ['blur', 'change']},
        ],
        sex: [
          {required: true, message: '性别不能为空', trigger: ['blur', 'change']},
        ],
        into_work_time: [
          {required: true, message: '参加工作时间不能为空', trigger: ['blur', 'change']},
        ],
        birthday: [
          {required: true, message: '生日不能为空', trigger: ['blur', 'change']},
        ],
        email: [
          {required: true, message: '邮箱不能为空', trigger: ['blur', 'change']},
        ],
        phone: [
          {required: true, message: '手机号不能为空', trigger: ['blur', 'change']},
        ],
        wechat_id: [
          {required: true, message: '微信号不能为空', trigger: ['blur', 'change']},
        ],
        expect_city: [
          {required: true, message: '期望城市不能为空', trigger: ['blur', 'change']},
        ],
        expect_salary_down: [
          {required: true, message: '期望薪资下限不能为空', trigger: ['blur', 'change']},
        ],
        expect_salary_up: [
          {required: true, message: '期望薪资上限不能为空', trigger: ['blur', 'change']},
        ],
        origin_city: [
          {required: true, message: '籍贯不能为空', trigger: ['blur', 'change']},
        ],
        politics_status: [
          {required: true, message: '政治面貌不能为空', trigger: ['blur', 'change']},
        ]
      },
      /**
       * 教育经历
       */
      eduExperienceDialogFormVisible: false,
      eduExperienceArray: [],
      edu_form: {
        school_name: "",
        education: "",
        specialty: "",
        start_time: "",
        end_time: "",
        orderBy: 0,
        id: "",
        resume_id: ""
      },
      edu_form_rules: {
        school_name: [
          {required: true, message: '学校名称不能为空', trigger: ['blur', 'change']},
        ],
        education: [
          {required: true, message: '学历不能为空', trigger: ['blur', 'change']},
        ],
        specialty: [
          {required: true, message: '所在专业不能为空', trigger: ['blur', 'change']},
        ],
        start_time: [
          {required: true, message: '入学时间不能为空', trigger: ['blur', 'change']},
        ],
        end_time: [
          {required: true, message: '退学时间不能为空', trigger: ['blur', 'change']},
        ],
        orderBy: [
          {required: true, message: '顺序不能为空', trigger: ['blur', 'change']},
        ],
      },
      degreeOptions: [{
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }, {
        value: '无要求',
        label: '无要求'
      }],

      /**
       * 实习经历
       */
      praExperienceDialogFormVisible: false,
      praExperienceArray: [],
      pra_form: {
        company_name: "",
        career_name: "",
        start_time: "",
        end_time: "",
        id: "",
        resume_id: ""
      },
      pra_form_rules: {
        company_name: [
          {required: true, message: '公司名称不能为空', trigger: ['blur', 'change']},
        ],
        career_name: [
          {required: true, message: '职位不能为空', trigger: ['blur', 'change']},
        ],
        start_time: [
          {required: true, message: '开始时间不能为空', trigger: ['blur', 'change']},
        ],
        end_time: [
          {required: true, message: '结束时间不能为空', trigger: ['blur', 'change']},
        ],
      },

      /**
       * 项目经历
       */
      proExperienceDialogFormVisible: false,
      proExperienceArray: [],
      pro_form: {
        project_name: "",
        project_character: "",
        start_time: "",
        end_time: "",
        id: "",
        resume_id: ""
      },
      pro_form_rules: {
        project_name: [
          {required: true, message: '项目名称不能为空', trigger: ['blur', 'change']},
        ],
        project_character: [
          {required: true, message: '项目角色不能为空', trigger: ['blur', 'change']},
        ],
        start_time: [
          {required: true, message: '开始时间不能为空', trigger: ['blur', 'change']},
        ],
        end_time: [
          {required: true, message: '结束时间不能为空', trigger: ['blur', 'change']},
        ],
      },

      uploadResumeDialogVisible: false,

      resumesDisabled: false,
      resumesFileDisabled: false,
      serverUrl: 'http://localhost:8888/user/resume/file/online/',

      photoUploadDisabled: false,
      modifyResumePhotoDialogVisible: false,

      honorAwardDialogFormVisible: false,
      honorAward_form_loading: false,
      honorAward_form: {
        user_id: "",
        resume_id: "",
        content: "",
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic'], // 加粗 斜体
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['clean'], // 清除文本格式
          ]
        },
        placeholder: '请输入所获得的荣誉'
      },

      hobbyDialogFormVisible: false,
      hobby_loading: false,
      hobby_form: {
        user_id: "",
        hobby: "",
        resume_id: "",
      },
    }
  },
  async mounted() {
    await this.getList()
    await this.$notify.success({
      title: '提示',
      message: '请认真填写信息，或将影响就业',
      offset: 200,
      duration: 5000
    });
  },
  computed: {
    ...mapGetters(['city', 'user', 'resumes']),
    submitPhotoUrl() {
      return '/api/user/resume/photo/' + this.resume_id + "/" + this.user.id
    },
    submitResumeFileUrl() {
      return '/api/user/resume/file/' + this.user.id
    },
    modifyPhotoUrl() {
      return '/api/user/resume/photo/modify/' + this.resume_form.id + "/" + this.user.id
    }
  },
  methods: {
    msToDate,
    getList() {
      this.container_loading = true
      this.handleClearResumeInfo()
      this.$store.dispatch("resume/getUserResumesInfoById", this.user.id)
          .then((resp) => {
            if (resp) this.$message.success("用户简历数据获取成功!")
          })
          .catch((resp) => {
            this.$message.error("用户简历数据获取失败, 请重试!")
          })
          .finally(() => {
            setTimeout(() => {
              this.container_loading = false
            }, 1000)
          })
    },
    handleAvatarChangeIcon(file, fileList) {//选中文件触发的change事件
      const isJPG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      const isLt2M = file.raw.size / 1024 / 1024 < 2
      if (!isPNG && !isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      } else if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      } else {
        this.resume_form.resume_avatar = URL.createObjectURL(file.raw);//赋值图片的url，用于图片回显功能
        this.avatarFile = file
      }
    },
    //上传失败
    uploadFileError(err, file, fileList) {
      this.$message.error("上传失败！")
      this.loading = false
    },
    //上传成功
    uploadFileSuccess(response, file, fileList) {
      if (response.data) {
        this.resume_form = {
          id: "",
          name: "",
          expect_career: "",
          sex: "",
          into_work_time: "",
          birthday: "",
          email: "",
          phone: "",
          wechat_id: "",
          expect_city: [],
          expect_salary_down: "",
          expect_salary_up: "",
          origin_city: [],
          resume_avatar: "",
          politics_status: "",
          resume_title: "",
          user_id: 0
        }
        this.avatarFile = ''
        this.resume_id = ''
        this.$message.success('添加简历基本信息成功！');
        this.$refs.resume_form.resetFields()
      } else {
        this.$message.error('上传失败！');
      }
      this.loading = false
      // this.getList()
      location.reload()
    },
    handleSubmitResumeInfo() {
      this.$refs['resume_form'].validate(valid => {
        if (valid) {
          this.$prompt('请给简历起个标题方便查找', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            this.loading = true
            this.resume_form.birthday = msToDate(this.resume_form.birthday).hasTime
            this.resume_form.into_work_time = msToDate(this.resume_form.into_work_time).hasTime
            this.resume_form.expect_city = this.resume_form.expect_city[1]
            this.resume_form.origin_city = this.resume_form.origin_city[1]
            this.resume_form.user_id = this.user.id
            this.resume_form.resume_title = value
            this.$store.dispatch("resume/saveUserResumeInfo", this.resume_form)
                .then((resp) => {
                  if (resp.flag) {
                    if (this.resume_form.resume_avatar !== '' && this.avatarFile !== '') {
                      this.resume_id = resp.id
                      setTimeout(() => {
                        this.$refs.upload.submit();
                      }, 1000)
                    }
                  }
                })
                .catch((error) => {
                  this.$message.error(error)
                  this.loading = false
                }).finally(() => {
              this.handleClearResumeInfo()
              this.loading = false
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        } else {
          this.loading = false
        }
      })
    },
    handleSubmitUpdateResumeInfo() {
      this.$refs['resume_form'].validate(valid => {
        if (valid) {
          this.$prompt('是否需要修改简历标题，需要请填写，不需要则直接提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            this.loading = true
            this.resume_form.birthday = msToDate(this.resume_form.birthday).hasTime
            this.resume_form.into_work_time = msToDate(this.resume_form.into_work_time).hasTime
            if (this.resume_form.expect_city.length === 2) {
              this.resume_form.expect_city = this.resume_form.expect_city[1]
            }
            if (this.resume_form.origin_city.length === 2) {
              this.resume_form.origin_city = this.resume_form.origin_city[1]
            }
            if (value !== null) {
              this.resume_form.resume_title = value
            }
            this.resume_form.resume_avatar = this.resumes.resumesInfo.find((item) => item.id === this.resume_form.id).resume_avatar
            this.$store.dispatch("resume/modifyUserResumeInfo", this.resume_form)
                .then((resp) => {
                  if (resp) {
                    this.$refs.upload.submit()
                  }
                  this.$message.success("修改成功")
                  this.checkResumeInfoById(this.resume_form.id)
                })
                .catch((error) => {
                  this.$message.error(error)
                  this.loading = false
                }).finally(() => {
              this.getList();
              this.loading = false
            })
          }).catch(() => {
          });
        }
      })
    },
    handleClearResumeInfo() {
      this.resume_info_loading = true
      this.resume_form = {
        id: "",
        name: "",
        expect_career: "",
        sex: "",
        into_work_time: "",
        birthday: "",
        email: "",
        phone: "",
        wechat_id: "",
        expect_city: [],
        expect_salary_down: "",
        expect_salary_up: "",
        origin_city: [],
        resume_avatar: "",
        politics_status: "",
        resume_title: "",
        user_id: 0
      }
      this.$refs.resume_form.resetFields()
      this.edu_form = {
        school_name: "",
        education: "",
        specialty: "",
        start_time: "",
        end_time: "",
        orderBy: 0,
        id: "",
        resume_id: ""
      }
      this.pra_form = {
        company_name: "",
        career_name: "",
        start_time: "",
        end_time: "",
        id: "",
        resume_id: ""
      }
      this.pro_form = {
        project_name: "",
        project_character: "",
        start_time: "",
        end_time: "",
        id: "",
        resume_id: ""
      }
      this.honorAward_form = {
        user_id: "",
        resume_id: "",
        content: "",
      }
      this.hobby_form = {
        user_id: "",
        hobby: "",
        resume_id: "",
      }
      this.photoUploadDisabled = false
      this.resume_info_loading = false
    },
    handleEduExperienceDialogClose() {
      this.$confirm('此操作将不会保存已输入内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.eduExperienceDialogFormVisible = false
        this.edu_form = {
          school_name: "",
          education: "",
          specialty: "",
          start_time: "",
          end_time: "",
          orderBy: 0,
          id: "",
          resume_id: ""
        }
        this.$refs.edu_form.resetFields()
      }).catch(() => {
      })
    },
    handleSaveUserEduExperience() {
      this.$refs['edu_form'].validate(valid => {
        if (valid) {
          // 通过校验
          this.edu_form.start_time = msToDate(this.edu_form.start_time).hasTime
          this.edu_form.end_time = msToDate(this.edu_form.end_time).hasTime
          this.$store.dispatch("resume/modifyOrSaveUserResumeEduExperienceInfo", this.edu_form)
              .then((resp) => {
                if (resp) {
                  this.getList()
                  let resume_id = this.edu_form.resume_id
                  this.$message.success("操作成功")
                  this.eduExperienceDialogFormVisible = false
                  this.checkResumeInfoById(resume_id)
                }
              }).catch((error) => {
            this.$message.error(error)
          }).finally(() => {
            this.$refs.edu_form.resetFields()
          })
        }
      })
    },
    handlePraExperienceDialogClose() {
      this.$confirm('此操作将不会保存已输入内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.praExperienceDialogFormVisible = false
        this.pra_form = {
          company_name: "",
          career_name: "",
          start_time: "",
          end_time: "",
          id: "",
          resume_id: ""
        }
        this.$refs.pra_form.resetFields()
      }).catch(() => {
      })
    },
    handleSaveUserPraExperience() {
      this.$refs['pra_form'].validate(valid => {
        if (valid) {
          // 通过校验
          this.pra_form.start_time = msToDate(this.pra_form.start_time).hasTime
          this.pra_form.end_time = msToDate(this.pra_form.end_time).hasTime
          this.$store.dispatch("resume/modifyOrSaveUserResumePraExperienceInfo", this.pra_form)
              .then((resp) => {
                if (resp) {
                  this.getList()
                  let resume_id = this.pra_form.resume_id
                  this.$message.success("操作成功")
                  this.praExperienceDialogFormVisible = false
                  this.checkResumeInfoById(resume_id)
                }
              }).catch((error) => {
            this.$message.error(error)
          }).finally(() => {
            this.$refs.pra_form.resetFields()
          })
        }
      })
    },
    handleProExperienceDialogClose() {
      this.$confirm('此操作将不会保存已输入内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.proExperienceDialogFormVisible = false
        this.pro_form = {
          project_name: "",
          project_character: "",
          start_time: "",
          end_time: "",
          id: "",
          resume_id: ""
        }
        this.$refs.pro_form.resetFields()
      }).catch(() => {
      })
    },
    handleSaveUserProExperience() {
      this.$refs['pro_form'].validate(valid => {
        if (valid) {
          // 通过校验
          this.pro_form.start_time = msToDate(this.pro_form.start_time).hasTime
          this.pro_form.end_time = msToDate(this.pro_form.end_time).hasTime
          this.$store.dispatch("resume/modifyOrSaveUserResumeProExperienceInfo", this.pro_form)
              .then((resp) => {
                if (resp) {
                  this.getList()
                  let resume_id = this.pro_form.resume_id
                  this.$message.success("操作成功")
                  this.proExperienceDialogFormVisible = false
                  this.checkResumeInfoById(resume_id)
                }
              }).catch((error) => {
            this.$message.error(error)
          }).finally(() => {
            this.$refs.pro_form.resetFields()
          })
        }
      })
    },
    uploadOnlineResume(command) {
      this.uploadResumeDialogVisible = true
    },
    handleUploadResumeDialogClose() {
      this.uploadResumeDialogVisible = false
      this.$refs.upload_resume.clearFiles();
    },
    beforeResumeFileUpload(file) {
      const nameLength = file.name.split('.').length
      const lengthDemand = nameLength > 2
      if (lengthDemand) {
        this.$message.error("文件名中请勿加入特殊符号 如:(.)")
        this.$refs.upload_resume.clearFiles();
        return false
      }

      const fileNameLength = file.name.length <= 15
      if (!fileNameLength) {
        this.$message.error("文件名过长，请修改")
        this.$refs.upload_resume.clearFiles();
        return false
      }

      const typeArray = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword']
      const {type} = file
      const typeDemand = typeArray.includes(type)
      if (!typeDemand) {
        this.$message.error("文件类型不正确请重新添加")
        this.$refs.upload_resume.clearFiles();
        return false
      }

      const {size} = file
      const sizeDemand = size / 1024 / 1024 < 5
      if (!sizeDemand) {
        this.$message.error("文件大小已超过5MB请重新添加")
        this.$refs.upload_resume.clearFiles();
        return false
      }

      return true
    },
    resumeFileUploadSuccess(response, file, fileList) {
      const {data} = response
      if (data) {
        this.handleUploadResumeDialogClose()
        this.$message.success("上传成功！")
        this.getList()
      }
      if (response.msg) {
        this.handleUploadResumeDialogClose()
        this.$message.error(response.msg)
        this.getList()
      }
    },
    resumeFileUploadError(response, file, fileList) {
      this.handleUploadResumeDialogClose()
      this.$message.error(response.msg)
      this.getList()
    },
    checkResumeInfoById(id) {
      this.container_loading = true
      this.handleClearResumeInfo()
      this.$store.dispatch("resume/getUserResumeInfoByUserIdAndResumeId", {id: this.user.id, resumeId: id})
          .then((resp) => {
            let resume = resp
            this.resume_form = {...resume}
            this.resume_form.resume_avatar = this.server + this.resume_form.resume_avatar
            this.eduExperienceArray = {...resume.eduExperiences}
            this.praExperienceArray = {...resume.praExperiences}
            this.proExperienceArray = {...resume.proExperiences}
            this.honorAward_form.content = resume.honor_award
            this.hobby_form.hobby = resume.hobby
            this.photoUploadDisabled = true
          })
          .catch((error) => {})
          .finally(() => {
            setTimeout(() => {
              this.container_loading = false
            }, 1500)
          })
    },
    checkSuff(name) {
      return name.split(".")[1] === 'pdf'
    },
    downloadFile(id) {
      let _that = this
      this.resumesFileDisabled = true
      window.open(_that.serverUrl + id)
      setTimeout(() => {
        this.resumesFileDisabled = false
      }, 3000)
    },
    eduExperienceDialogFormOpen() {
      if (this.resume_form.id === "" || this.resume_form.id === null) {
        this.$message.error("请先选中[ 平台简历 ]中的简历才可进行相应操作")
        return
      }
      this.edu_form.resume_id = this.resume_form.id
      this.eduExperienceDialogFormVisible = true
    },
    praExperienceDialogFormOpen() {
      if (this.resume_form.id === "" || this.resume_form.id === null) {
        this.$message.error("请先选中[ 平台简历 ]中的简历才可进行相应操作")
        return
      }
      this.pra_form.resume_id = this.resume_form.id
      this.praExperienceDialogFormVisible = true
    },
    proExperienceDialogFormOpen() {
      if (this.resume_form.id === "" || this.resume_form.id === null) {
        this.$message.error("请先选中[ 平台简历 ]中的简历才可进行相应操作")
        return
      }
      this.pro_form.resume_id = this.resume_form.id
      this.proExperienceDialogFormVisible = true
    },
    moreOnlineResume(command) {
      let nameArray = command.split(".")
      let operation = nameArray[0]
      let id = nameArray[1]
      if (operation === "download") {
        this.downloadFile(id)
      } else if (operation === "remove") {
        this.$store.dispatch("resume/deleteUserOnlineResumeFileById", id)
            .then((resp) => {
              if (resp) this.$message.success("删除文件成功 !")
            }).catch((error) => {
          this.$message.error(error)
        }).finally(() => {
          this.getList()
        })
      }
    },
    resumeChooses(command) {
      let solveCommand = command.split(".")
      if (solveCommand.length !== 2) {
        this.$message.error("指令解析异常！")
        return
      }
      let operaType = solveCommand[0]
      let id = solveCommand[1]
      if (operaType === "info") {
        this.checkResumeInfoById(id);
      } else if (operaType === "remove") {
        this.$confirm(`确认删除该简历?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch("resume/deleteUserResumeById", id).then((resp) => {
            if (resp) {
              this.$message.success("简历删除成功")
              this.handleClearResumeInfo()
            }
          }).catch((error) => {
            this.$message.error(error)
          }).finally(() => {
            this.getList()
          })
        }).catch(() => {
        })
      } else {
        this.$message.error("暂无对应操作 请联系管理员")
      }
    },
    updateEduExperience(edu) {
      this.eduExperienceDialogFormVisible = true
      this.edu_form = edu
    },
    deleteEduExperience(edu) {
      this.$confirm(`确认删除 ${edu.school_name} 教育经历?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("resume/deleteEduExperienceById", edu.id)
            .then((resp) => {
              if (resp) {
                this.$message.success("删除成功")
                this.checkResumeInfoById(edu.resume_id);
              }
            })
            .catch((error) => {
              this.$message.error("删除异常 请重试！")
            })
      }).catch(() => {
      })
    },
    updatePraExperience(pra) {
      this.praExperienceDialogFormVisible = true
      this.pra_form = pra
    },
    deletePraExperience(pra) {
      this.$confirm(`确认删除 ${pra.company_name} 实习经历?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("resume/deletePraExperienceById", pra.id)
            .then((resp) => {
              if (resp) {
                this.$message.success("删除成功")
                this.checkResumeInfoById(pra.resume_id);
              }
            })
            .catch((error) => {
              this.$message.error("删除异常 请重试！")
            })
      }).catch(() => {
      })
    },
    updateProExperience(pro) {
      this.proExperienceDialogFormVisible = true
      this.pro_form = pro
    },
    deleteProExperience(pro) {
      this.$confirm(`确认删除 ${pro.project_name} 项目经历?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("resume/deleteProExperienceById", pro.id)
            .then((resp) => {
              if (resp) {
                this.$message.success("删除成功")
                this.checkResumeInfoById(pro.resume_id);
              }
            })
            .catch((error) => {
              this.$message.error("删除异常 请重试！")
            })
      }).catch(() => {
      })
    },
    handleModifyUploadResumeDialogClose() {
      this.modifyResumePhotoDialogVisible = false
      this.$refs.modify_photo.clearFiles();
    },
    beforeModifyResumePhotoUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    modifyResumePhotoUploadSuccess(response, file, fileList) {
      const {data} = response
      if (data) {
        this.handleModifyUploadResumeDialogClose()
        this.$message.success("上传成功！")
        this.checkResumeInfoById(this.resume_form.id);
      }
      if (response.msg) {
        this.handleModifyUploadResumeDialogClose()
        this.$message.error(response.msg)
        this.checkResumeInfoById(this.resume_form.id);
      }
    },
    modifyResumePhotoUploadError(response, file, fileList) {
      this.modifyResumePhotoDialogVisible = false
      this.handleModifyUploadResumeDialogClose()
      this.$message.error(response.msg)
      this.checkResumeInfoById(this.resume_form.id);
    },
    honorAwardDialogFormOpen() {
      if (this.resume_form.id === "" || this.resume_form.id === null) {
        this.$message.error("请先选中[ 平台简历 ]中的简历才可进行相应操作")
        return
      }
      this.honorAward_form.resume_id = this.resume_form.id
      this.honorAward_form.user_id = this.user.id
      this.honorAwardDialogFormVisible = true
    },
    handleHonorAwardDialogClose() {
      this.$confirm('此操作将不会保存已输入内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.honorAwardDialogFormVisible = false
        this.honorAward_form.content = JSON.parse(localStorage.getItem("store"))
            .resume.resumesInfo.resumesInfo.find((item) => item.id === this.resume_form.id).honor_award
      }).catch(() => {})
    },
    handleSaveUserHonorAward() {
      this.$confirm('确认提交吗?', '提示', {
        confirmButtonText: '确认提交',
        cancelButtonText: '我在看看',
        type: 'warning'
      }).then(() => {
        this.honorAward_form_loading = true
        this.$store.dispatch("resume/modifyUserResumeHonorAward", this.honorAward_form)
            .then((resp) => {
              if (resp) {
                this.$message.success("操作成功！")
                this.honorAward_form_loading = false
                this.checkResumeInfoById(this.honorAward_form.resume_id)
                this.honorAwardDialogFormVisible = false
              }
            })
            .catch((error) => {
              this.$message.error(error)
            })
      }).catch(() => {})
    },
    hobbyDialogFormOpen() {
      if (this.resume_form.id === "" || this.resume_form.id === null) {
        this.$message.error("请先选中[ 平台简历 ]中的简历才可进行相应操作")
        return
      }
      this.hobby_form.resume_id = this.resume_form.id
      this.hobby_form.user_id = this.user.id
      this.hobbyDialogFormVisible = true
    },
    handleHobbyDialogClose() {
      this.$confirm('此操作将不会保存已输入内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.hobbyDialogFormVisible = false
        this.hobby_form.hobby = JSON.parse(localStorage.getItem("store"))
            .resume.resumesInfo.resumesInfo.find((item) => item.id === this.resume_form.id).hobby
      }).catch(() => {})
    },
    handleSaveUserHobby() {
      this.$confirm('确认提交吗?', '提示', {
        confirmButtonText: '确认提交',
        cancelButtonText: '我在看看',
        type: 'warning'
      }).then(() => {
        this.hobby_loading = true
        this.$store.dispatch("resume/modifyUserResumeHobby", this.hobby_form)
            .then((resp) => {
              if (resp) {
                this.$message.success("操作成功！")
                this.hobby_loading = false
                this.checkResumeInfoById(this.hobby_form.resume_id)
                this.hobbyDialogFormVisible = false
              }
            })
            .catch((error) => {
              this.$message.error(error)
            })
      }).catch(() => {})
    },
  },
  beforeRouteEnter(to, from, next) {
    if (store.getters.token === undefined || store.getters.token === '') {
      Message.error("未登录无权访问！")
      next("/")
    }
    next()
  },
}
</script>

<style scoped lang="css">

.resume {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.resume-container {
  margin: 25px auto;
  width: 1100px;
  min-width: 1100px;
}

.resume-info {
  width: 825px;
  min-width: 825px;
}

.resume-sum {
  width: 284px;
  min-width: 284px;
  position: relative;
  margin-left: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.resume-form-row-first {
  width: 100%;
  display: flex;
}

.resume-item-height {
  width: 350px;
}

.resume-base—info-btn {
  width: 150px;
  background-color: #dbecef;
  color: #28b8b8;
  border: none;
}

.resume-base—info-btn:hover {
  color: white;
  background-color: #28b8b8;
}

.resume-base—info-btn:focus {
  color: white;
  background-color: #28b8b8;
}

.title {
  font-weight: 600;
  font-size: 17px
}

.info {
  margin-top: 10px;
  font-size: 15px;
  color: #808080;
}

.el-dropdown-link {
  cursor: pointer;
  color: #939393;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.online-resume-file {
  margin-top: 5px;
}

</style>
